<div class="row-content am-cf">
    <div class="row">
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
            <div class="widget am-cf">
                <div class="widget-head am-cf">
                    <div class="widget-title am-cf">城市列表</div>
                </div>
                <div class="widget-body am-fr">
                     <div class="page_toolbar am-margin-bottom-xs am-cf">
                        <form class="toolbar-form" action="">
                            <input type="hidden" name="s" value="/<?= $request->pathinfo() ?>">
                            <div class="am-u-sm-12 am-u-md-9">
                                <div class="am fr">
                                    <div class="am-form-group am-fl">
                                        <?php $is_public = $request->get('is_public') ?: null; ?>
                                        <select name="is_public"
                                                data-am-selected="{btnSize: 'sm', placeholder: '城市状态'}">
                                            <option value=""></option>
                                            <option value="1"
                                                <?= $is_public == 1 ? 'selected' : '' ?>>使用
                                            </option>
                                            <option value="0"
                                                <?= $is_public == 0 ? 'selected' : '' ?>>禁用
                                            </option>
                                        </select>
                                    </div>
                                    <div class="am-form-group am-fl">
                                        <div class="am-input-group am-input-group-sm tpl-form-border-form">
                                            <input type="text" class="am-form-field" name="search"
                                                   placeholder="请输入城市名称"
                                                   value="<?= $request->get('search') ?>">
                                            <div class="am-input-group-btn">
                                                <button class="am-btn am-btn-default am-icon-search"
                                                        type="submit"></button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="am-u-sm-12">
                        <table width="100%" class="am-table am-table-compact am-table-striped tpl-table-black ">
                            <thead>
                            <tr>
                                <th></th>
                                <th>ID</th>
                                <!-- <th>上级ID</th> -->
                                <th>名称</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <?php if (!empty($list)): ?>
                                <?php foreach ($list as $item): ?>
                                    <tr data-key="<?= $item['title']; ?>"> 
                                        <td class="am-text-middle actionP">收缩</td>
                                        <td colspan="3" style="float: center;">
                                         首字母： <?= $item['title']; ?>
                                        </td>
                                    </tr>
                                    <?php if (isset($item['item'])): foreach ($item['item'] as $city): ?>
                                    <tr data-key="<?= $city['key']?>">
                                        <td></td>
                                        <td><?= $city['id']?></td>
                                        <td><?= $city['name']?></td>
                                        <td> 
                                            <span class="public-state am-badge am-badge-<?= $city['is_public'] ? 'warning' : 'success' ?> " data-id="<?= $city['id'] ?>" data-state="<?= $city['is_public']?>">
                                                <?= $city['is_public'] ? '禁用' : '使用' ?>
                                            </span> 
                                           </td>
                                    </tr>
                                    <?php endforeach; endif; ?>
                                <?php endforeach; ?>
                            <?php else: ?>
                                <tr>
                                    <td colspan="6" class="am-text-center">暂无记录</td>
                                </tr>
                            <?php endif; ?>
                            </tbody>
                        </table>
                    </div>
                    <div class="am-u-lg-12 am-cf">
                        <div class="am-fr pagination-total am-margin-right">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {

        // 活动状态
        $('.public-state').click(function () {
            // 验证权限
            if (!"<?= checkPrivilege('setting.region/state')?>") {
                return false;
            }
            var data = $(this).data();
            layer.confirm('确定要' + (parseInt(data.state) ? '禁用' : '启用')
                , {title: '友情提示'}
                , function (index) {
                    $.post("<?= url('setting.region/state') ?>", {
                        city_id: data.id,
                        state: Number(!(parseInt(data.state)))
                    }, function (result) {
                        result.code === 1 ? $.show_success(result.msg, result.url)
                            : $.show_error(result.msg);
                    });
                    layer.close(index);
                });
        });


        // 删除元素
        var url = "<?= url('setting.region/delete') ?>";
        $('.item-delete').delete('city_id', url);
        
        $('.actionP').click(function() {
            var btn = $(this).text();
            var parent = $(this).parent('tr');
            var pkey = parent.attr('data-key');
            var childs = parent.nextAll();
            if (btn == '收缩') {
                $(this).text('展开');
                childs.each(function(){
                    var key = $(this).attr('data-key');
                    if (key == pkey) {
                        $(this).css('display','none');
                    }else{
                        return false;
                    }      
                });
            }else if(btn == '展开'){
                $(this).text('收缩');
                childs.each(function(){
                    var key = $(this).attr('data-key');
                    if (key == pkey) {
                        $(this).css('display','');
                    }else{
                        return false;
                    }  
                });
            }
        })

        // 城市展开 作废
        $('.hasChild').click(function(){
            var btn = $(this).text();
            var parent = $(this).parent('tr');
            var plevel = parent.attr('data-level');
            var childs = parent.nextAll();
            if (btn == '收缩') {
                $(this).text('展开');
                childs.each(function(){
                    var level = $(this).attr('data-level');
                    if (level > plevel) {
                        $(this).css('display','none');
                    }else{
                        return false;
                    }      
                });
            }else if(btn == '展开'){
                $(this).text('收缩');
                childs.each(function(){
                    var level = $(this).attr('data-level');
                    if (level > plevel) {
                        $(this).css('display','');
                    }else{
                        return false;
                    }  
                });
            }
        });
    });
</script>
